extends ../_layout

block active
  - sidebar_active = 'timeline.html'

block content

  h3 Timeline

  // START timeline
  // ul.timeline-alt
  ul.timeline
    li.timeline-separator(data-datetime="Now")
    // START timeline item
    li
      .timeline-badge.primary
        em.fa.fa-users
      .timeline-panel
        .popover
            h4.popover-title Client Meeting
            .arrow
            .popover-content
              p Av 123 St - Floor 2
                br
                small Pellentesque ut diam velit, eget porttitor risus. Nullam posuere euismod volutpat. 
    // END timeline item
    // START timeline item
    li.timeline-inverted
      .timeline-badge.warning
        em.fa.fa-phone
      .timeline-panel
        .popover.right
            h4.popover-title Call
            .arrow
            .popover-content
              p Michael 
                a(href="tel:+011654524578") (+011) 6545 24578 ext. 132
                br
                small Pellentesque ut diam velit, eget porttitor risus. Nullam posuere euismod volutpat. 
    // END timeline item
    // START timeline separator
    li.timeline-separator(data-datetime="Yesterday")
    // END timeline separator
    // START timeline item
    li
      .timeline-badge.danger
        em.fa.fa-video-camera
      .timeline-panel
        .popover
            h4.popover-title Conference
            .arrow
            .popover-content
              p Join development group
              small
                a(href='skype:echo123?call') 
                  em.fa.fa-phone
                  |  Call the Skype Echo
    // END timeline item
    // START timeline item
    li.timeline-inverted
      .timeline-panel
        .popover.right
            h4.popover-title Appointment
            .arrow
            .popover-content
              p Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam.
              .btn-group
                a.dropdown-toggle(href="#", data-toggle='dropdown', data-play="fadeIn") 
                  em.fa.fa-paperclip
                ul.dropdown-menu.text-left
                  li: a(href='#') 
                    em.fa.fa-download
                    |  Download
                  li: a(href='#') 
                    em.fa.fa-share
                    |  Send to
                  li.divider
                  li: a(href='#') 
                    em.fa.fa-times
                    |  Delete
    // END timeline item
    // START timeline item
    li
      .timeline-badge.info
        em.fa.fa-plane
      .timeline-panel
        .popover
            h4.popover-title Fly
            .arrow
            .popover-content
              p Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
    // END timeline item
    // START timeline item
    li
      .timeline-panel
        .popover
            h4.popover-title Appointment
            .arrow
            .popover-content
              p
                | Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
    // END timeline item
    // START timeline separator
    li.timeline-separator(data-datetime="2014-05-21")
    // END timeline separator
    // START timeline item
    li.timeline-inverted
      .timeline-badge.success
        em.fa.fa-music
      .timeline-panel
        .popover.right
            h4.popover-title Relax
            .arrow
            .popover-content
              p Listen some music
    // END timeline item
    // START timeline item
    li.timeline-end
      a(href="#").timeline-badge
        em.fa.fa-plus
    // END timeline item
  // END timeline
